window.onload = init;

function init() {
  const map = new ol.Map({
    view: new ol.View({
      center: [12516277.078680376, 4113385.6216916633],
      zoom: 7,
      maxZoom: 18,
      minZoom: 4,
      // rotation:0.5
    }),
    // layers: [
    //     new ol.layer.Tile({
    //         source: new ol.source.OSM()
    //     })
    // ],
    target: "js-map",
  });

  // map.on("click", function (e) {
  //     console.log(e.coordinate)
  // })

  // Basemaps Layers
  const openStreetMapStandard = new ol.layer.Tile({
    source: new ol.source.OSM(),
    visible: false,
    title: "OSMStandard",
  });

  const openStreetMapHumanitarian = new ol.layer.Tile({
    source: new ol.source.OSM({
      url: "https://tile-{a-c}.openstreetmap.fr/hot/{z}/{x}/{y}.png",
    }),
    visible: false,
    title: "OSMHumanitarian",
  });

  const stamenTerrain = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: "https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",

      attributions: `Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.`,
    }),
    visible: true,
    title: "StamenTerrain",
  });

  //Layer Group
  const baseLayerGroup = new ol.layer.Group({
    layers: [openStreetMapStandard, stamenTerrain, openStreetMapHumanitarian],
  });

  console.log(baseLayerGroup);
  console.log(baseLayerGroup.getLayerStatesArray());
  map.addLayer(baseLayerGroup);

  //Layer Switcher Logic for Basemaps
  const baseLayerElements = document.querySelectorAll(
    ".sidebar input[type=radio]"
  );

  console.log(baseLayerElements);

  for (let baseLayerElement of baseLayerElements) {
    baseLayerElement.addEventListener("change", function (e) {
      let baseLayerElementValue = e.target.defaultValue;
      console.log(baseLayerElementValue);

      baseLayerGroup.getLayers().forEach((ele, index, array) => {
        let baseLayerTitle = ele.get("title");

        console.log("baseLayerTitle", baseLayerTitle);
        ele.setVisible(baseLayerTitle === baseLayerElementValue);
      });
    });
  }
  const fillStyle = new ol.style.Fill({
    color: [84, 118, 255, 0.1],
  });
  const strokeStyle = new ol.style.Stroke({
    color: [46, 45, 45, 1],
    width: 1.2,
  });
  const circleStyle = new ol.style.Circle({
    fill: new ol.style.Fill({
      color: [245, 49, 5, 1],
    }),
    radius: 7,
    stroke: strokeStyle,
  });
  //Vector Layers
  const CNGeoJson = new ol.layer.VectorImage({
    source: new ol.source.Vector({
      url: "./data/china-edit.json",
      format: new ol.format.GeoJSON(),
    }),
    visible: true,
    title: "CHINA",
    style: new ol.style.Style({
      fill: fillStyle,
      stroke: strokeStyle,
      image: circleStyle,
    }),
  });

  const LYGeoJson = new ol.layer.VectorImage({
    source: new ol.source.Vector({
      url: "./data/LY.json",
      format: new ol.format.GeoJSON(),
    }),
    visible: true,
    title: "LY",
  });

  map.addLayer(CNGeoJson);
  map.addLayer(LYGeoJson);

  // Vector Feature Popup Logic

  //   import Overlay from "ol/Overlay";

  const popup = new ol.Overlay({
    element: document.getElementById("popup"),
  });

  map.addOverlay(popup);

  const popupName = document.getElementById("name");
  const popupInfo = document.getElementById("info");

  map.on("click", function (e) {
    popup.setPosition(undefined);

    // console.log(e);
    map.forEachFeatureAtPixel(
      e.pixel,
      function (layer, ...args) {
        console.log("layer", layer);
        console.log("args", args);
        console.log(layer.get("name"));
        console.log(layer.get("info"));
        let clickedCoordinate = e.coordinate;
        let clickedFeatureName = layer.get("name");
        let clickedFeatureInfo = layer.get("info");
        popup.setPosition(clickedCoordinate);
        popupName.innerText = clickedFeatureName;
        popupInfo.innerText = clickedFeatureInfo || "";
      },
      {
        layerFilter: function (layerCandidate) {
          console.log("layerCandidate", layerCandidate);
          return layerCandidate.get("title") === "LY";
        },
      }
    );
  });
}
